<template>
  <div class="page">
    <h2>系统设置</h2>
    <div class="card">
      <div class="row">
        <label>商户名称</label>
        <input v-model="form.name" placeholder="请输入商户名称" />
      </div>
      <div class="row">
        <label>默认门店</label>
        <input v-model="form.store" placeholder="默认门店名称" />
      </div>
      <div class="row">
        <label>低库存阈值</label>
        <input v-model.number="form.lowStockThreshold" type="number" min="0" />
      </div>
      <div class="row">
        <label>自动刷新</label>
        <select v-model.number="form.refreshInterval">
          <option :value="0">关闭</option>
          <option :value="30">30 秒</option>
          <option :value="60">60 秒</option>
          <option :value="300">5 分钟</option>
        </select>
      </div>
      <div class="actions">
        <button class="primary" @click="save">保存</button>
        <button @click="reset">重置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const defaultForm = {
  name: localStorage.getItem('merchant_name') || '示例商户',
  store: localStorage.getItem('merchant_store') || '默认门店',
  lowStockThreshold: Number(localStorage.getItem('low_stock_threshold') || 5),
  refreshInterval: Number(localStorage.getItem('refresh_interval') || 0),
}

const form = reactive({ ...defaultForm })

const save = () => {
  localStorage.setItem('merchant_name', form.name)
  localStorage.setItem('merchant_store', form.store)
  localStorage.setItem('low_stock_threshold', String(form.lowStockThreshold))
  localStorage.setItem('refresh_interval', String(form.refreshInterval))
  alert('已保存')
}

const reset = () => {
  Object.assign(form, { ...defaultForm })
}
</script>

<style scoped>
.page { padding: 16px; }
.card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.06); max-width: 560px; }
.row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
label { color: #374151; font-size: 14px; }
input, select { height: 36px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 10px; }
.actions { display: flex; gap: 10px; }
.primary { background: #10b981; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
button { border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
</style>


